<template>
     <div class="disbaled-cover" v-if="needpay == -1"> <!-- v-if="needpay == -1"-->
        <div class="price-box vtb">
            <el-button round type="danger" @click="toPay">{{ fee }}元解锁</el-button>
            <div class="price-tip">可免费下载 发送至微信</div>

        </div>
    </div>
    <div class="disbaled-cover" v-if="needpay == 1">
        <div class="price-box">
            <el-button round type="danger">查看次数已达上限</el-button>  
        </div>
    </div>

    <div class="ctrl-bar" v-if="needpay == 0">
        <div class="btn-one" @click="toDownload">
            <el-icon size="25" color="#666666">
                <Download />
            </el-icon>
        </div>
        <div class="btn-one" @click="toShare">
            <el-icon size="25" color="#666666">
                <Share />
            </el-icon>
        </div>
    </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';
import { Download,Share } from '@element-plus/icons-vue';

import wx from 'weixin-js-sdk';

const props = defineProps({
    query: {
        type: Object,
        default: () => {}
    }
})

const fee = computed(() => {
    return props.query.pri || 0
})

const needpay = computed(() => {
    return props.query.np
})


const toPay = () => {
    wx.miniProgram.navigateTo({
        url: `/pages/document/PayForFile?id=${props.query.id}`
    })
}

const toDownload = () => {
    wx.miniProgram.navigateTo({
        url: `/pages/document/ShareFile?id=${props.query.id}`
    })
}
const toShare = () => {
    wx.miniProgram.navigateTo({
        url: `/pages/document/ShareFile?id=${props.query.id}`
    })
}


// const toSendToFriend = () => {
//     //向小程序发送消息，只有回退时，小程序才能收到
//     wx.miniProgram.postMessage({ data: {type: 'share' }});
//     wx.miniProgram.navigateBack();
// }

</script>

<style scoped>
.disbaled-cover{
  position: fixed;
  top: 0; right: 0;bottom: 0;left:0;
  background: linear-gradient(to bottom, rgba(255,255,255, 0) 50%, rgba(255,255,255, 1) 70%, rgba(255,255,255, 1));
  z-index: 100;
}
.price-box{
  position: absolute;
  left:0;right:0;bottom: 0;
  height: 40%;
  display: flex;
  justify-content: center;
  align-items: center;

}
.vtb{
    flex-direction: column;
}
.price-tip{
    text-align: center;
    margin-top: 5px;
    font-size: 14px;
    color: #666;
}
.ctrl-bar{
    position: fixed;
    right: 10px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}
.btn-one{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.05);
    margin-bottom: 10px;
}
</style>